<script setup>
import DynamicMenu from './DynamicMenu.vue'
import BreadcrumbNav from './BreadcrumbNav.vue'
</script>

<template>
  <div class="layout-root">
    <AppHeader />
    <div class="main-container">
      <aside class="sidebar">
        <DynamicMenu />
      </aside>
      <main class="main-content">
        <BreadcrumbNav />
        <div class="content-wrapper">
          <router-view />
        </div>
      </main>
      <RightSidebar />
    </div>
    <AppFooter />
  </div>
</template>

<style scoped>
.layout-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-container {
  flex: 1;
  display: flex;
  width: 100vw;
  margin: 0;
  background: #fff;
}
.sidebar {
  width: 220px;
  min-width: 180px;
}
.main-content {
  flex: 1;
  min-width: 0;
  margin: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.content-wrapper {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
.rightbar {
  width: 320px;
  min-width: 260px;
  max-width: 360px;
  background: #fff;
  box-sizing: border-box;
}
</style> 